<template>
  <div>

    <el-dialog
      title="新建文件夹"
      :visible.sync="dialogVisible"
      class="btwaDialog"
      width="600px"
      :before-close="closeDialog"
    >
      <div>
        <div class="formItem">
          <div style="width: 100px;white-space: nowrap;text-align: right;">文件夹名：</div>
          <el-input style="width: 300px;" placeholder="请输入" v-model="newFolderName" />
        </div>
        <div class="formItem">
          <div style="width: 100px;white-space: nowrap;text-align: right;">新建位置：</div>
          <div style="flex: 0.8;" v-if="dialogVisible">
            <el-tree
            ref="trees"
              :props="props"
              :load="loadNode"
              :node-key="'id'"
              :current-node-key="current_fold_id"
              :highlight-current="true"
              :expand-on-click-node="false"
              lazy
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="onSelectFolderOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getFolders,
  createNewFolder
} from "../../api";
  export default {
    name: "CreateFolderDialog",
    props: ['visible', 'propData'],
    data(){
      return {
        newFolderName: '',
        dialogVisible: false, // 最外层弹框控制显隐
        props: {
          label: 'name',
          children: 'name'
        },
        current_fold_id: null,// 当前的文件id
        current_node: null,// 当前选中的节点
      }
    },
    mounted(){

    },
    watch:{
      visible(newVal, oldVal){
        this.dialogVisible = newVal
        if(newVal){
          this.getFolders(0);
          this.current_fold_id = null;
          this.current_node = null;
          this.newFolderName = '';
        }
      },
    },
    methods: {
      async onSelectFolderOk() {
        if(!(this.newFolderName.trim())) {
          return this.$message.error('请填写文件夹名称')
        }
        if(this.current_node && this.current_node.data && this.current_node.data.level >= 3) {
          return this.$message.error('文件夹目录最多支持三级')
        }
        let res = await createNewFolder({
          parent_id: this.current_fold_id || 0,
          name: this.newFolderName
        }).catch(e => e)
        if(res.code == 200 || res.msg == 'success') {
          this.$message.success("创建成功")
          if(this.current_fold_id) {
            let fatherNodes = this.$refs.trees.getNode(this.current_fold_id);
            if(!fatherNodes) {
              // 查询不到证明未加载该节点
              return;
            }
            fatherNodes.loaded = false;
            fatherNodes.expand();
          } else {
            let fatherNodes = this.$refs.trees.root;
            if(!fatherNodes) {
              return;
            }
            fatherNodes.loaded = false;
            fatherNodes.expand();
          }
          this.dialogVisible = false
          this.$emit("changeVisible", false)
          this.$emit("changeFolderDirectory", this.current_fold_id, this.current_node)
        } else {
          this.$message.error(res.msg)
        }
      },
      handleNodeClick(data, node, myself) {
        console.log(data, node, myself, 'handleNodeClick');
        if(data.id != this.current_fold_id){
          this.current_fold_id = data.id;
          this.current_node = node;
        }
      },
      async loadNode(node, resolve) {
        if (node.level >= 0 && node.level < 3) {// 限制最多3级
          console.log('node',node);
          let list = await this.getFolders(node.data ? node.data.id : 0)
          // let list = await this.getFolders(0)
          return resolve(list || []);
        }
        if (node.level >= 3) {
          return resolve([]);
        }
      },
      async getFolders(folder_id) {
        let res = await getFolders({parent_id: folder_id}).catch(e => e)
        if(res.code == 200 || res.msg == 'success'){
          return res.data.list
        } else {
          this.$message.error('获取文件夹目录失败')
        }
      },
      closeDialog(done) {
        this.dialogVisible = false;
        this.$emit("changeVisible", false)
        if(done){
          done();
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
.formItem {
  display: flex;
  padding-bottom: 10px;
  width: 100%;
}
.inputM {
    margin: 0 5px;
    width: 150px;
    white-space: nowrap;
}
.searchItem{
  padding: 0px 10px;
  .searchItemText{
    cursor: pointer;
    &:hover{
      color: "#409eff"
    }
  }
}
.actionItem{
  cursor: pointer;
  color: #409eff;
}
</style>
